<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第二步: 引入两个js 文件 -->
    <!-- 01: react语法的核心库 -->
    <script src="../js/react.js"></script>
    <!-- react操作dom的核心库 -->
    <script src="../js/react-dom.js"></script>
    <!-- 引入babel.js 用来编译jsx 语法 -->
    <script src="../js/babel.js"></script>
</head>

<body>
    <!-- 第一步: 创建一个容器 id名为root -->
    <div id="root">


    </div>

</body>

</html>
<script type="text/babel">
    // 01:获取页面中的根节点
    const root_container = document.querySelector('#root');
    // 02: 创建react根实例, 相当于vue中 createApp()
    const root = ReactDOM.createRoot(root_container);

    // 04: 使用babel语法 定义一个jsx 语法结构
    // 使用jsx语法: 最终通过babel 编译成 React.createElement()写法

    const username = '2214班级';
    const age = 20;
    const imgurl = 'https://img2.baidu.com/it/u=3409195701,3249202311&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=602'
    const add = (num1, num2) => {
        return num1 + num2
    }
    const linkstr = '<a href="https://www.baidu.com">百度一下</a>'
    const userArr = [{
        id: 1,
        name: "高启强"
    }, {
        id: 2,
        name: "高启盛"
    },
    {
        id: 3,
        name: "安欣"
    }];
    const numArr = ['a', 'b', 'c'];
    const el =
        <div className="box">
            <p>我是p元素--{username}</p>
            <p>{age > 18 ? "成年" : "未成年"}</p>
            <p>{add(1, 2)}</p>
            <p>{username.substr(0, 4)}</p>
            {/*<img src={imgurl} alt="" />*/}
            {/*注释的内容*/}
            {/*<p >{linkstr}</p>*/}
            <p dangerouslySetInnerHTML={{ __html: linkstr }}></p>
            <ul>
                {userArr.map((item, index) => {
                    return <li key={index}>{item.name}</li>
                })}
            </ul>
            <p>{numArr}</p>
            <p style={{ background: "red" }}> 设置行内样式</p>
        </div >
    // jsx 结构, 最终会被react 编译成一个虚拟dom, 进而准换成真实dom.更新页面
    // console.log('el', el);
    root.render(el)





</script>